// searchApi
import React from "react";
import {Container,  Header, Item, Icon, Input, Text, Button, ListItem } from "native-base";
import { searchApi } from "../api/List";
import {FlatList,View} from 'react-native';

export default class Home extends React.Component {
  state = {
    dataList: [],
    text: ''
  };
  componentDidMount() {
    // this.getData();
  }
  getData =() => {
    const {text} = this.state;
    searchApi(text).then(res => {
      console.log(res);
      // console.error('console.error ==> Screen height is:' + JSON.stringify(res));
      this.setState({
        dataList: res.data
      });
    });
  }
  goDetail =()=>{
    const {push} = this.props.history;
    push('/detail');
  }
  render() {
    const {dataList} = this.state;
    return (
      <Container>
        <Header searchBar rounded>
          <Item>
            <Icon name="ios-search" />
            <Input placeholder="Search" onChangeText={(text) => this.setState({text})} />
            <Icon name="ios-people" />
          </Item>
          <Button transparent onPress={this.getData}>
            <Text>Search</Text>
          </Button>
        </Header>
        <View style={{backgroundColor:'red',width: 370}}>
        <Text style={{fontSize: 12}}>搜索页面</Text>
        </View>
        <FlatList
          data={dataList}
          renderItem={({item,index}) => <ListItem key={'search-' + index } onPress={this.goDetail}><Text >{item.name}</Text></ListItem>}
        />
      </Container>
    );
  }
}
